<template>
  <div class="big-box">
    <div class="top-box">
        <div class="top">
            <div>
                <span @click="back()"><img src="/image/Mine/zjt.png" alt=""></span>
                <p class="p1">我的地址</p>
                <p class="p2">新增收货地址</p> 
            </div>
        </div>  
    </div>
    <div class="main">
        <div class="main-box">
            <router-link to="/newsite" class="sh">添加一个收货地址</router-link>
        </div>
    </div>
  </div>
</template>

<script>
export default {
    methods:{
        back(){
            this.$router.push("/mine")
        }
    }
}
</script>

<style scoped>

.top-box{
    width: 100%;
    height: 0.38rem;
    display: flex;
    justify-content: center;
    border-bottom: 0.01rem solid #f2f2f2;
}
.top{
    width: 93%;
    height: 0.38rem;
}
.top div{
    width: 100%;
    height: 0.38rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.top div span,.top div span img{
    width: 0.2rem;
    height: 0.2rem;
}
.top div .p1{
    font-size: 0.16rem;
}
.top div .p2{
    font-size: 0.14rem;
    color: #4abcfb;
}
.main{
    width: 100%;
    display: flex;
    justify-content: center;
}
.main-box{
    width: 93%;
    height: 5rem;
    display: flex;
    justify-content: center;
    align-items:center;
}
.main-box .sh{
    font-size: 0.18rem;
    background-color: #24a1fd;
    padding: 0.08rem 0.25rem;
    color: white;
    border-radius:0.06rem;
}
</style>